﻿@{
    ViewData["Title"] = "ShowProductDetail";
    Layout = null;
}

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品详情列表</title>
    <link href="~/libs/layui-v2.5.6/layui/css/layui.css" rel="stylesheet" />
</head>
<body>
    <div class="layui-container">
        <!-- 查询表单 -->
        <form class="layui-form">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">货主</label>
                    <div class="layui-input-inline">
                        <input type="text" name="owner" id="owner" placeholder="请输入货主" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">商品名称</label>
                    <div class="layui-input-inline">
                        <input type="text" name="productName" id="productName" placeholder="请输入商品名称" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <button class="layui-btn" type="button" id="searchBtn">查询</button>
                    <button class="layui-btn layui-btn-primary" type="reset">重置</button>
                    <button class="layui-btn" type="button" id="addBtn">录入</button>
                    <button class="layui-btn layui-btn-warm" type="button" id="editBtn">编辑</button>
                    <button class="layui-btn layui-btn-danger" type="button" id="batchDeleteBtn">批量删除</button>
                </div>
            </div>
        </form>

        <!-- 数据表格 -->
        <table class="layui-hide" id="productTable" lay-filter="tableFilter"></table>

        <script type="text/html" id="operationBar">
            <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="delete">删除</button>
        </script>
    </div>

    <script src="~/libs/jquery/jquery.js"></script>
    <script src="~/libs/layui-v2.5.6/layui/layui.js"></script>
  
    <script>
        layui.use(['table', 'form'], function () {
            var table = layui.table;
            var form = layui.form;

            // 渲染数据表格
            function renderTable() {
                console.log(table);
                table.render({
                    elem: '#productTable',
                    url: '/ProductDetail/ShowProductDetails', // 数据接口
                    page: true,
                    limit: 10, // 默认每页显示条数
                    limits: [10, 20, 30], // 每页条数选择项
                  cols: [[
                            {type: 'checkbox'},
                            { field: 'id', title: 'ID', width: 200, align: 'center'},
                            {field: 'chineseName', title: '所属货主', width: 200, align: 'center',templet: function (d)
                                {
                                    return d.chineseName;
                                }
                            },
                             {field: 'productCategories', title: '产品大类', width: 200, align: 'center', templet: function (d) 
                                {
                                    //三目运算符判断产品大类
                                     return d.productCategories === 0 ? '电缆' :
                                           d.productCategories === 1 ? '恒温' :
                                           d.productCategories === 2 ? '常温' :
                                           d.productCategories === 3 ? '调温' : '未知';
                                }
                             },
                             {field: 'productAttributes', title: '产品属性', width: 200, align: 'center', templet: function (d) 
                                {
                                    return d.productAttributes === 0 ? '电缆' :
                                    d.productAttributes === 1 ? '数码产品' :
                                    d.productAttributes === 2 ? '日用' : '未知';
                                }
                             },
                            {field: 'price', title: '价格', width: 200, align: 'center'},
                             {field: 'productCode', title: '商品编码', width: 200, align: 'center'},
                            {field: 'itemBarcode', title: '商品条码', width: 200, align: 'center'},
                             {field: 'productSpecifications', title: '商品规格', width: 200, align: 'center'},
                             {field: 'productBranding', title: '商品品牌', width: 200, align: 'center'},
                              {field: 'sku', title: 'SKU', width: 200, align: 'center'},
                              {field: 'productName', title: '商品名称', width: 200, align: 'center'},
                             {field: 'unit', title: '单位', width: 200, align: 'center'},
                             {field: 'weight', title: '重量', width: 200, align: 'center'},
                             {field: 'long', title: '长', width: 200, align: 'center'},
                             {field: 'wide', title: '宽', width: 200, align: 'center'},
                            {field: 'high', title: '高', width: 200, align: 'center'},
                             {field: 'volume', title: '体积', width: 200, align: 'center'},
                             {field: 'shelfLife', title: '保质期', width: 200, align: 'center'},
                             {field: 'acceptableDays', title: '允收天数', width: 200, align: 'center'},
                             {field: 'billableItems', title: '计费商品类', width: 200, align: 'center', templet: function (d) 
                                {
                                    //将 billableItems 的值和显示文本存储在一个对象中，直接通过键值对查找。
                                    const billableItemsMap = {
                                        0: '整拖',
                                        1: '轻抛/按箱',
                                        2: '轻抛5KG以上',
                                        3: '计费吨',
                                    };
                                     return billableItemsMap[d.billableItems]||'未知';
                                }
                             },
                             {field: 'codeDiscNumber', title: '码盘单层数量', width: 200, align: 'center'},
                             {field: 'discLayerHeight', title: '码盘层高', width: 200, align: 'center'},
                             {field: 'tearDownControl', title: '拆零控制', width: 200, align: 'center',templet: function (d) 
                                {
                                    const tearDownControlMap = {
                                        0: '是',
                                        1: '否',
                                        2: '初始',
                                    };
                                    return tearDownControlMap[d.tearDownControl]||'未知';
                                }
                             },
                             {field: 'splitUnits', title: '拆零单位', width: 200, align: 'center', templet: function (d) 
                                {
                                    const splitUnitsMap = {
                                        0: '件',
                                        1: '箱',
                                        2: '个',
                                        3: '桶',
                                    };
                                    return splitUnitsMap[d.splitUnits]||'未知';
                                }
                             },
                             {field: 'splitNumber', title: '拆零数量', width: 200, align: 'center'},
                             {field: 'numLnventoryLevels', title: '最小库存量', width: 200, align: 'center'},
                             {fixed: 'right', title: '操作', toolbar: '#operationBar', width: 100, align: 'center'}
                        ]],
                    where: {
                        owner: $("#owner").val(),
                        productName: $("#productName").val(),
                    },
                    parseData: function (res) {
                        console.log(res);
                        return {
                            code: res.code, // 解析接口状态
                            count: res.count, // 解析数据长度
                            data: res.data // 解析数据列表
                        };
                    }
                });
            }

            // 初始化表格
            renderTable();

            // 查询按钮事件
            $("#searchBtn").on("click", function () {
                console.log("查询");
                renderTable();
            });

            // 重置按钮事件
            $("button[type='reset']").on("click", function () {
                $("#owner").val("");
                $("#productName").val("");
                renderTable();
            });

                        // 单元操作事件
            table.on('tool(tableFilter)', function (obj) {
                var layEvent = obj.event;
                var data = obj.data;
                if (layEvent === 'delete') {
                    layer.confirm('确定删除吗？', function (index) {
                       $.ajax({
                            url: '/ProductDetail/DeleteProductDetails',
                            type: 'post',
                            data: { id: data.id },
                            success: function (res) {
                                if (res==1) {
                                    layer.msg('删除成功');
                                    renderTable(); // 刷新表格数据
                                } else {
                                    layer.msg('删除失败');
                                }
                            }
                        });
                        layer.close(index);
                    });
                }
            });

             // 添加
         document.getElementById('addBtn').addEventListener('click', function () {
                 layer.open({
                   type: 2, // page 层类型
                   area: ['800px', '600px'],
                   title: '添加商品信息',
                   shade: 0.6, // 遮罩透明度
                   shadeClose: true, // 点击遮罩区域，关闭弹层
                   maxmin: true, // 允许全屏最小化
                   anim: 0, // 0-6 的动画形式，-1 不开启
                    content: '/ProductDetail/CreateProductDetail',
                    end: function () {
                        renderTable(); // 刷新表格数据
                    }
                 });

         });

               // 修改
         document.getElementById('editBtn').addEventListener('click', function () {
               var checkStatus = table.checkStatus('productTable');
                var data = checkStatus.data;
                console.log(111,data);
                if (data.length === 0) {
                    layer.msg('请选择要修改的明细');
                }
                else{
                         layer.open({
                       type: 2, // page 层类型
                       area: ['800px', '600px'],
                       title: '修改商品信息',
                       shade: 0.6, // 遮罩透明度
                       shadeClose: true, // 点击遮罩区域，关闭弹层
                       maxmin: true, // 允许全屏最小化
                       anim: 0, // 0-6 的动画形式，-1 不开启
                        content: '/ProductDetail/UpdateProductDetail?id='+data[0].id,
                        end: function () {
                            renderTable(); // 刷新表格数据
                        }
                     });
                }
         });


            // 批量删除按钮事件
            $("#batchDeleteBtn").on("click", function () {
                var checkStatus = table.checkStatus('productTable');
                var data = checkStatus.data;
                console.log(1,data);
                if (data.length === 0) {
                    layer.msg('请选择要删除的明细');
                } else {
                    layer.confirm('确定批量删除选中的记录吗？', function (index) {
                        $.ajax({
                            url: '/ProductDetail/BulkDeleteProductDetails',
                            type: 'post',
                            data: { array: data.map(function (item) { return item.id; }).toString() },
                            success: function (res) {
                                console.log(2,res);
                                if (res==1) {
                                    layer.msg('批量删除成功');
                                    renderTable(); // 刷新表格数据
                                } else {
                                    layer.msg('批量删除失败');
                                }
                            }
                        });

                        layer.close(index);
                    });
                }
            });

        });
    </script>
</body>
</html>